<template>
  <div class="bd" style="width: 100%; height: 100%">
    <aside class="aside"><img :src="url" alt="404 Image" /></aside>
    <main class="main">
      <h1>Sorry!</h1>
      <p>
        要么你不够酷，无法访问此网页，要么它不存在<em>. . . 你的社交生活.</em>
      </p>
      <button @click="handleBack">返回主页！</button>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const url = require('@/assets/images/Mirror.png')
    const router = useRouter()
    const handleBack = () => {
      router.go(-1)
    }
    return {
      url,
      handleBack
    }
  }
})
</script>

<style scoped>
.bd {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 100vh;
  max-width: 1000px;
  width: calc(100% - 4rem);
  margin: 0 auto;
}
div > * {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-flow: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 100vh;
  max-width: 500px;
  width: 100%;
  padding: 2.5rem;
}

.aside {
  background-image: url('../../assets/images/right-edges.png');
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 25px 100%;
}
.aside img {
  display: block;
  height: auto;
  width: 100%;
}

.main {
  text-align: center;
}
.main h1 {
  font-family: 'Fontdiner Swanky', cursive;
  font-size: 4rem;
  color: #c5dc50;
  margin-bottom: 1rem;
}
.main p {
  margin-bottom: 2.5rem;
}
.main p em {
  font-style: italic;
  color: #c5dc50;
}
.main button {
  font-family: 'Fontdiner Swanky', cursive;
  font-size: 1rem;
  color: #383838;
  border: none;
  background-color: #f36a6f;
  padding: 1rem 2.5rem;
  -webkit-transform: skew(-5deg);
  transform: skew(-5deg);
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  cursor: url('../../assets/images/cursors-eye.png'), auto;
}
.main button:hover {
  background-color: #c5dc50;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}
</style>
